<template>
  <div id="data-view">
    <dv-full-screen-container>
      <div class="main-header">
        <div class="mh-middle">极光可视化管理系统</div>
        <div class="mh-right"></div>
      </div>

      <dv-border-box-7 class="main-container">
        <div class="right-main-container">
          <dv-border-box-8 class="rmc-bottom-container">
            <Bottom-Charts />
          </dv-border-box-8>
          <div class="rmc-bottom-machinemain">
            <dv-border-box-8
              class="rmc-bottom-machineline"
              v-for="(scheduling, index) in scheduling_data"
              v-bind:key="index"
            >
              <dv-border-box-10
                v-for="(item, index1) in scheduling.open_card_details_scheduling"
                v-bind:key="index1"
                :class="getListClass(scheduling)"
                :style="scrollStyles[index]"
                :ref="
                  el => {
                    if (el) {
                      el.scheduling = scheduling;
                      scrollContainers[index] = el;
                    }
                  }
                "
              >
                <div>{{ item.customer.code }}</div>
                <div><span>产品：</span>{{ item.material.name }}</div>
                <div><span>数量:</span>{{ item.quantity }}</div>
                <div><span>工艺:</span>{{ item.process_name }}</div>
              </dv-border-box-10>
            </dv-border-box-8>
          </div>
        </div>
      </dv-border-box-7>
    </dv-full-screen-container>
  </div>
</template>

<script setup>
import api from "@/api";
import { onMounted, nextTick, ref } from "vue";
// import Charts from "@jiaminghi/charts";
import BottomCharts from "./BottomCharts.vue";
import { changeDefaultConfig } from "@jiaminghi/charts";

changeDefaultConfig("color", ["#FFF"]);
const config = {
  speed: 40, // 滚动速度 (像素/秒)
};

const timeInterval = ref(0);
const getData = () => {
  api.pro.scheduling.list.get({ sort: "sort", order: "asc" }).then(res => {
    scheduling_data.value = res.data.rows;
    updateScrollParams();
  });
};

const setTimeFun = () => {
  clearInterval(timeInterval.value);
  // 刷新页面的逻辑，例如重新加载数据
  return nextTick()
    .then(() => {
      getData();
    })
    .then(() => {
      timeInterval.value = setInterval(() => {
        setTimeFun();
      }, 15000); // 每5000毫秒（5秒）执行一次
    });
};

onMounted(async () => {
  setTimeFun();
  await nextTick();
  // setChart();
});
const getListClass = elm => {
  // console.log(elm.open_card_details_scheduling.length);
  return (
    "rmc-bottom-machinelinelist" +
    " rmc-bottom-machinelinelist" +
    (elm.open_card_details_scheduling.length > 5 ? 5 : 1)
  );
};
const scheduling_data = ref([]);
const scrollContainers = ref([]); // 滚动容器DOM引用
const scrollStyles = ref({}); // 动态滚动样式

const updateScrollParams = async () => {
  await nextTick();

  scrollStyles.value = scrollContainers.value.reduce((acc, container, index) => {
    if (!container) return acc;

    acc[index] = {
      "--scroll-distance": `-${
        container.scheduling.open_card_details_scheduling.length * 117 - 600
      }px`,
      "--scroll-duration": `${
        (container.scheduling.open_card_details_scheduling.length * 117 - 600) /
        config.speed
      }s`,
    };

    return acc;
  }, {});
};
</script>

<style type="text/css">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("./img/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .mh-middle {
      font-size: 30px;
    }
  }

  .main-container {
    height: 100%;
    .border-box-content {
      padding: 15px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .right-main-container {
    width: 100%;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .rmc-bottom-container {
    height: 50px;
  }
  .rmc-bottom-containerrun {
    width: calc(100% / 11);
    height: 100px;
    display: flex;
    flex-direction: row;
  }
  .rmc-bottom-machineline {
    width: 100%;
    height: 100%;
  }

  .rmc-bottom-containerrun .border-box-content,
  .rmc-bottom-machineline .border-box-content {
    display: block;
  }
  .rmc-bottom-machinemain {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
  }
  .rmc-bottom-machinelinelistrun {
    width: 100%;
    height: 100px;
  }
  .rmc-bottom-machinelinelist {
    width: 100%;
    height: calc(100% / 8);
  }
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(var(--scroll-distance));
  }
  100% {
    transform: translateY(0);
  }
}
.rmc-bottom-machineline {
  overflow: auto;
  max-height: calc(100% - 80px);
}
.rmc-bottom-machineline .rmc-bottom-machinelinelist5 {
  animation: scroll linear infinite;
  animation-duration: var(--scroll-duration);
  will-change: transform;
}
</style>
